<template>
  <div class="global-container">
    <div class="global-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/current.png')"
      ></el-image>
      <div class="title">
        外部服务管理
        <div class="title-content">
          提供外部服务管理能力，支持外部服务注册、删除等功能。
        </div>
      </div>
    </div>
    <div class="searchDiv1">
      <div class="searchDiv global-operate">
        <span class="keyword">关键词：</span>
        <el-input
          v-model="searchInput"
          placeholder="通过服务名称、中文服务名、服务标识检索"
          clearable
          class="inputStyle"
          style="width: 20%"
          prefix-icon="el-icon-search"
          @input="filterOutServiceList"
        />
        <div class="right-menu">
          <el-button
            style="width: 100px"
            type="primary"
            @click="openAddOutServiceDialog"
            class="el-button-primary-style"
          >
            添加
          </el-button>
        </div>
      </div>
    </div>
    <div class="servicePackageList">
      <div style="height: 60vh">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="tableSelectionChange"
          :cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
          :header-cell-style="{ textAlign: 'left', paddingLeft: '30px' }"
        >
          <!--          <el-table-column type="selection"/>-->
          <el-table-column prop="serviceZhname" label="服务名称" width="200">
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="serviceZhname"-->
          <!--            label="中文服务名"-->
          <!--            width="200"-->
          <!--          />-->
          <el-table-column
            prop="serviceName"
            label="服务标识"
            width="250"
          />
          <el-table-column label="描述">
            <template slot-scope="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.serviceDescription"
                placement="bottom-start"
                popper-class="tooltipClass"
                :disabled="isShowTooltip"
              >
                <div
                  class="descSpan"
                  style="text-align: left"
                  @mouseover="onMouseOver($event)"
                >
                  {{ scope.row.serviceDescription }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间" width="240"/>

          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="padding: 0"
                @click="showInfoDetail(scope.row)"
              >端口详情
              </el-button>
              <el-button
                type="text"
                style="padding: 0 2px"
                @click="editInfo(scope.row)"
              >编辑
              </el-button>
              <!--
              <el-button
                type="text"
                style="color: #f56c6c; padding: 0"
                @click="handleDelete(scope.row)"
                >删除
              </el-button> -->
              <el-popconfirm
                title="确认删除外部服务信息？"
                @confirm="deleteInfo(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  style="color: #f56c6c; padding: 0 8px"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px; float: right">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :total="page.total"
          :page-size="page.pageSize"
          :page.sync="page"
          @current-change="changePage"
        />
      </div>
    </div>
    <div v-if="addOutServiceDialog">
      <el-dialog
        title="添加外部服务"
        :visible.sync="addOutServiceDialog"
        width="670px"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :before-close="beforeCloseAddOutServiceDialog"
      >
        <add-out-service-dialog
          :parentFunction="this.getAllOutServiceList"
          ref="addDialogRef"
        ></add-out-service-dialog>
      </el-dialog>
    </div>
    <div v-if="detailInfoDialog">
      <el-dialog
        title="查看端口详情"
        :visible.sync="detailInfoDialog"
        width="600px"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :before-close="beforeClosePortsDetailDialog"
      >
        <el-table
          :data="servicePortInfo"
          style="width: 100%"
          :row-style="{ height: '1.5rem' }"
          :cell-style="{ padding: '10px' }"
          max-height="50vh"
        >
          <el-table-column type="index" label="索引"></el-table-column>
          <el-table-column prop="portType" label="端口类型"></el-table-column>
          <el-table-column prop="port" label="端口"></el-table-column>
          <el-table-column label="端口描述">
            <template slot-scope="scope">
              <span v-if="scope.row.portDescription === ''"> 暂无描述 </span>
              <span v-else>
                <el-tooltip
                  effect="dark"
                  :content="scope.row.portDescription"
                  placement="bottom-start"
                  popper-class="tooltipClass"
                >
                  <div class="descSpan">
                    {{ scope.row.portDescription }}
                  </div>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="mainPort" label="主端口">
            <template slot-scope="scope">
              {{ scope.row.mainPort ? "是" : "否" }}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="small"
            @click="beforeClosePortsDetailDialog"
            class="el-button-primary-style"
          >关闭
          </el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="updateOutServiceDialog">
      <el-dialog
        title="编辑外部服务"
        :visible.sync="updateOutServiceDialog"
        width="670px"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :before-close="beforeCloseUpdateDialog"
      >
        <el-form
          :model="updateInfo"
          ref="ruleFormF"
          label-width="100px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <el-form-item label="服务名称" prop="serviceZhame">
            <el-input
              v-model="updateInfo.serviceZhame"
              placeholder="外部服务名称"
              clearable
              style="width: 500px"
              disabled
            ></el-input>
          </el-form-item>
          <!--          <el-form-item label="中文名称" prop="serviceZhname">-->
          <!--            <el-input-->
          <!--              v-model="updateInfo.serviceZhname"-->
          <!--              placeholder="外部服务中文名称"-->
          <!--              clearable-->
          <!--              style="width: 500px"-->
          <!--            ></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="服务标识" prop="serviceName">
            <el-input
              v-model="updateInfo.serviceName"
              placeholder="外部服务标识"
              clearable
              style="width: 500px"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务描述" prop="serviceDescription">
            <el-input
              type="textarea"
              v-model="updateInfo.serviceDescription"
              style="width: 500px"
              clearable
              placeholder="外部服务描述信息，用于描述外部服务功能"
            ></el-input>
          </el-form-item>
          <el-form-item label="外部服务IP" prop="serviceIp">
            <el-input
              v-model="updateInfo.serviceIp"
              style="width: 500px"
              clearable
              placeholder="外部服务IP"
            ></el-input>
          </el-form-item>
          <el-form-item label="端口信息" prop="servicePorts">
            <template slot-scope="scope">
              <el-input
                placeholder="端口号"
                type="number"
                v-model="servicePort.port"
                style="width: 200px"
              >
                <el-select
                  v-model="servicePort.portType"
                  slot="prepend"
                  placeholder="端口类型"
                  style="width: 100px"
                >
                  <el-option label="http" value="http"></el-option>
                  <el-option label="tcp" value="tcp"></el-option>
                  <el-option label="udp" value="udp"></el-option>
                  <el-option label="http2" value="http2"></el-option>
                  <el-option label="websocket" value="websocket"></el-option>
                  <el-option label="grpc" value="grpc"></el-option>
                </el-select>
              </el-input>
              <el-input
                v-model="servicePort.portDescription"
                style="width: 130px; margin-left: 10px"
                clearable
                placeholder="端口描述"
              ></el-input>
              <el-checkbox
                v-model="servicePort.mainPort"
                style="margin-left: 10px"
              >
                主端口
              </el-checkbox>
              <el-button
                type="primary"
                size="small"
                style="margin-left: 15px"
                @click="addPortsInfo"
                class="el-button-primary-style"
              >
                添加
              </el-button>
            </template>
          </el-form-item>
          <el-form-item>
            <el-table
              :data="updateInfo.servicePorts"
              style="width: 500px;"
              v-show="updateInfo.servicePorts.length > 0"
              :show-header="false"
              :row-style="{ height: '1.5rem' }"
              :cell-style="{ padding: '0' }"
              height="6rem"
            >
              <el-table-column type="index"></el-table-column>
              <el-table-column prop="portType"></el-table-column>
              <el-table-column prop="port"></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <div class="descSpan">
                    {{ scope.row.portDescription }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  {{ scope.row.mainPort ? "主端口" : "非主端口" }}
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="deletePort(scope.$index)"
                    style="color: #f56c6c"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item>
            <div style="width: 500px;">
              <div style="float: right;">
                <el-button
                  type="primary"
                  size="small"
                  @click="updateServiceInfo"
                  class="el-button-primary-style"
                >确定
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  class="el-button-primary-style"
                  @click="beforeCloseUpdateDialog"
                >取消
                </el-button>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import AddOutServiceDialog from "../dependenceManage/AddOutServiceDialog.vue";

  export default {
    name: "OutServiceDependence",
    components: {
      AddOutServiceDialog,
    },
    data() {
      return {
        searchInput: "",
        addOutServiceDialog: false,
        detailInfoDialog: false,
        updateOutServiceDialog: false,
        page: {
          pageSize: 8,
          currentPage: 1,
          total: 0,
        },
        // 获取分页信息参数
        tmpPage: {
          pageSize: 10,
          pageNum: 1,
          filterKey: "",
        },
        isShowTooltip: false,
        // 获取指定外部服务参数
        servicePortInfo: [],
        updateInfo: {
          serviceZhname: "",
          serviceName: "",
          serviceDescription: "",
          serviceIp: "",
          servicePorts: [],
        },
        tableData: [],
        rules: {
          serviceZhname: [
            {
              required: true,
              message: "请填写外部服务名称",
              trigger: ["blur", "change"],
            },
            // {
            //   pattern: /^[A-Za-z]+$/, // 匹配大小写英文字母
            //   message: "只能包含英文大小写字母",
            //   trigger: ["blur", "change"],
            // },
            {
              min: 1,
              max: 64,
              message: "长度在 1 到 64 之间",
              trigger: "blur",
            },
          ],
          serviceName: [
            {
              required: true,
              message: "请填写服务标识",
              trigger: ["blur", "change"],
            },
          ],
          serviceDescription: [
            {
              min: 1,
              max: 1024,
              message: "长度在 1 到 1024 之间",
              trigger: "blur",
            },
          ],
          serviceIp: [
            {
              required: true,
              message: "请填写服务IP，系统中保持唯一",
              trigger: "blur",
            },
            {
              pattern:
                /^(?:(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
              message: "请输入有效的IP地址",
              trigger: ["blur", "change"],
            },
          ],
        },
        servicePort: {
          portType: "",
          port: null,
          portDescription: "",
          mainPort: false,
        },
      };
    },
    beforeMount() {
      this.getAllOutServiceList();
    },
    methods: {
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      // 过滤展示
      getAllOutServiceList() {
        this.$appStoreApi
          .getOutServiceListByPage(this.tmpPage)
          .then((res) => {
            this.tableData = res.data.records;
            console.log(res.data.records);
            this.page.total = res.data.total;
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      },
      filterOutServiceList() {
        this.tmpPage.filterKey = this.searchInput;
        this.tmpPage.pageNum = 1;
        this.tmpPage.pageSize = 10;
        this.getAllOutServiceList();
      },
      // 处理更多
      tableSelectionChange(selectList) {
        this.selectImageList = selectList;
      },
      // 更换页数
      changePage(currentPage) {
        this.page.currentPage = currentPage;
        this.tmpPage.pageNum = currentPage;
        this.getAllImageByPage();
      },
      // 展示端口详情
      showInfoDetail(row) {
        this.servicePortInfo = JSON.parse(JSON.stringify(row.servicePorts));
        this.detailInfoDialog = true;
      },
      beforeClosePortsDetailDialog() {
        this.detailInfoDialog = false;
        this.servicePortInfo = [];
      },
      //
      updateServiceInfo() {
        this.$refs.ruleFormF.validate((valid) => {
          if (valid) {
            this.$appStoreApi.updateOutService(this.updateInfo).then((res) => {
              if (res && res.code === 200) {
                this.beforeCloseUpdateDialog();
                this.getAllOutServiceList();
                this.$message.success(res.data);
              }
            });
          } else {
            this.$message.warning("数据存在问题，请检查");
            return false;
          }
        });
      },
      editInfo(row) {
        this.updateInfo = JSON.parse(JSON.stringify(row));
        this.updateOutServiceDialog = true;
      },
      deletePort(index) {
        this.updateInfo.servicePorts.splice(index, 1);
      },
      beforeCloseUpdateDialog() {
        this.updateInfo = {};
        this.updateOutServiceDialog = false;
      },
      handleDelete(row) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.deleteInfo(row);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      deleteInfo(row) {
        this.$appStoreApi.deleteOutService([row.serviceId]).then((res) => {
          if (res && res.code === 200) {
            this.getAllOutServiceList();
            this.$message.success(res.data);
          }
        });
      },
      beforeCloseAddOutServiceDialog(done) {
        this.addOutServiceDialog = false;
        this.getAllOutServiceList();
        if (done !== null) {
          done();
        }
        if (done === null) {
          this.$refs.addDialogRef.$off("beforeCloseAddOutServiceDialog");
        }
      },
      openAddOutServiceDialog() {
        this.addOutServiceDialog = true;
        this.$nextTick(() => {
          if (this.$refs.addDialogRef !== undefined) {
            this.$refs.addDialogRef.$on(
              "beforeCloseAddOutServiceDialog",
              this.beforeCloseAddOutServiceDialog
            );
          }
        });
      },
      // 添加一条端口信息
      addPortsInfo() {

        if (this.servicePort.portType === "") {
          this.$message.error("请选择端口类型");
          return;
        }
        if (this.servicePort.port === null) {
          this.$message.error("请输入端口");
          return;
        }
        if (this.servicePort.port > 65535 || this.servicePort.port < 1) {
          this.$message.error("端口在1-65535之间");
          return;
        }
        if (this.servicePort.portDescription === "") {
          this.servicePort.portDescription = "暂无描述";
          // return;
        }
        let filter = this.updateInfo.servicePorts.filter(ele => ele.port === this.servicePort.port);
        if (filter.length > 0) {
          this.$message.error("端口重复");
          return;
        }
        this.updateInfo.servicePorts.push(this.servicePort);
        // 清空输入框和单选框的值
        this.servicePort = {
          portType: "",
          port: null,
          portDescription: "",
          mainPort: false,
        };
      },
    },
  };
</script>

<style>
  .tooltipClass {
    width: 300px;
  }
</style>

<style scoped>
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #304156;
  }
</style>
